<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8" />
	<title>HMLT</title>
	<!-- <link rel="shortcut icon" href="./favicon.ico" /> -->
	<!-- <link rel="stylesheet" href="FF.css" /> -->
	<style type="text/css" media="all">
		* { padding:0; margin:0; }
	</style>
</head>
<body>
<table id="table">
	<tr><td><a class="menu" href="javascript:;">菜单一</a></td></tr>
	<tr><td><a class="menu" href="javascript:;">菜单二</a></td></tr>
	<tr><td><a class="menu" href="javascript:;">菜单三</a></td></tr>
</table>
<div id="itemMenu" style="display:none">
	<table border="1" width="100%" height="100%" bgcolor="#cccccc" style="cursor:default;" cellspacing="0">
		<tr>
			<td>添加</td>
		</tr>
		<tr>
			<td>修改</td>
		</tr>
		<tr>
			<td>删除</td>
		</tr>
	</table>
</div>

<script language="javascript">
    if(!window.createPopup){
        var __createPopup = function(){
            var SetElementStyles = function(element, styleDict){
                var style = element.style;
				for(var styleName in styleDict){
					style[styleName] = styleDict[styleName];
				}
            }
			window._popupmenu = window._popupmenu || document.createElement( 'div' );
			var eDiv = window._popupmenu;
			SetElementStyles(eDiv, {
				'position' : 'absolute',
				'top'      : 0 + 'px',
				'left'     : 0 + 'px',
				'width'    : 0 + 'px',
				'height'   : 0 + 'px',
				'zIndex'   : 1000,
				'display'  : 'none',
				'overflow' : 'hidden'
			});
            eDiv.body = eDiv;
            var opened = false;
            var setOpened = function(b){
                opened = b;
            }
            var getOpened = function(){
                return opened;
            }
            var getCoordinates = function(oElement){
                var coordinates = {x:0, y:0};
                while(oElement) {
                    coordinates.x += oElement.offsetLeft;
                    coordinates.y += oElement.offsetTop;
                    oElement       = oElement.offsetParent;
                }
                return coordinates;
            }
			var ret = {
				htmlTxt : '',
				document : eDiv,
				isOpen : getOpened(),
				isShow : false,
				hide : function(){
					SetElementStyles( eDiv, {
						'top': 0 + 'px',
						'left': 0 + 'px',
						'width': 0 + 'px',
						'height': 0 + 'px',
						'display' : 'none'
					});
					eDiv.innerHTML = '';
					this.isShow = false;
				},
				show : function(iX, iY, iWidth, iHeight, oElement){
					if(!getOpened()){
						document.body.appendChild(eDiv);
						setOpened(true);
					};
					this.htmlTxt = eDiv.innerHTML;
					if(this.isShow){
						this.hide();
					};
					eDiv.innerHTML     = this.htmlTxt;
					var coordinates    = getCoordinates(oElement);
					eDiv.style.top     = (iY + coordinates.x) + 'px';
					eDiv.style.left    = (iX + coordinates.y) + 'px';
					eDiv.style.width   = iWidth + 'px';
					eDiv.style.height  = iHeight + 'px';
					eDiv.style.display = 'block';
					this.isShow        = true;
				}
			};
			window.onclick = window.onblur = ret.hide;
			return ret;
        }
        window.createPopup = function() {
            return __createPopup();
        }
    }

	var preventDefault = function(e){
		if(e.preventDefault){
			e.preventDefault();
			e.stopPropagation();
		}else{
			e.returnValue=false;
			e.cancelBubble=true;
		}
		return false;
	};
	var table = document.getElementById('table');
	table.oncontextmenu = function(e){
		e = e || window.event;
		var target = e.target || e.srcElement;
		if(target.tagName.toLowerCase()!=='a'){
			return true;
		}
		popMenu(itemMenu, 100, e);
		return preventDefault(e);
	}
	var popMenu = function(menuDiv, width, e){
		var pop=window.createPopup();
		pop.document.body.innerHTML=menuDiv.innerHTML;
		var rowObjs=pop.document.body.children[0].rows;
		var rowCount=rowObjs.length;
		pop.document.oncontextmenu=function(){ return false; };
		pop.document.onclick=function(){ pop.hide(); };
		pop.show(e.clientX-1,e.clientY,width,rowCount*23,document.body);
		return true;
	};
</script>
<div id="page">
</div><!-- #page end! -->
</body>
</html>
